<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区 -->
            <div class="avatar_box">
                <img alt="avatar" height="30" src="../assets/img/storytelling.png" width="30"/>
            </div>
            <!-- 登录表单 -->
            <div>
                <el-form
                        :model="loginForm"
                        :rules="loginFormRules"
                        class="login_form"
                        label-width="60px"
                        ref="loginFormRef">
                    <el-form-item label="账号" prop="name">
                        <el-input prefix-icon="iconfont icon-user" v-model="loginForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="passWord">
                        <el-input
                                prefix-icon="iconfont icon-3702mima"
                                type="password"
                                v-model="loginForm.passWord"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="btns">
                        <el-button @click="login"
                                   style="margin-right: 20px; width: 200px; position: relative; left: -20px;"
                                   type="primary"><i
                                class="el-icon-user-solid" style="margin-right: 20px;"/>登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import common from "../store/common";
import {setToken, setUser} from "../store/session";
import {login, queryLoginUser} from "../store/user";

export default {
    data() {
        return {
            loginForm: {
                name: 'admin',
                passWord: '123'
            },
            // 表单验证
            loginFormRules: {
                name: [
                    {pattern: /^\w+$/, message: '请勿输入非法字符', trigger: "blur"},
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                passWord: [
                    {pattern: /^\w+$/, message: '请勿输入非法字符', trigger: "blur"},
                    {required: true, message: '请输入用户密码', trigger: 'blur'},
                    {min: 2, max: 18, message: '长度在 2 到 18 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields()
        },
        login() {
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid) return false
                login(this.loginForm).then(rs => {
                    if (rs.code === 200) {
                        setToken(rs.data);
                        queryLoginUser().then(user => {
                            setUser(user);
                        });
                        common.afterUpdateActions(this, true, '登录', '/', true);
                    } else {
                        this.$message.error('登入失败');
                    }
                });
            })
        }
    }
}
</script>

<style scoped>
    /* // lang="less" 支持less格式
    // scoped vue的指令，只在当前组件生效 */
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 360px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
    }

    .login_box .avatar_box {
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
    }


    .avatar_box > img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }

    .login_form {
        position: absolute;
        bottom: 60px;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .btns {
        display: flex;
        justify-content: center;
    }
</style>
